<template>
  <div id="hitchwallet">
    <top-bar :title="title"></top-bar>
    <div class="hitchwallet_box">
      <md-scroll-view ref="scrollView" :scrolling-x="false" @refreshing="$_onRefresh" :auto-reflow="true">
        <md-scroll-view-refresh
          slot="refresh"
          slot-scope="{ scrollTop, isRefreshActive, isRefreshing }"
          :scroll-top="scrollTop"
          :is-refreshing="isRefreshing"
          :is-refresh-active="isRefreshActive"
        ></md-scroll-view-refresh>
        <div class="hitchwallet_box_top">
          <h6>余额(元)</h6>
          <p>
            {{accountBalance}}
            <span>提现</span>
          </p>
        </div>
        <div class="hitchwallet_box_ct">
          <h6>累计车费</h6>
          <p>{{countAmt}}元</p>
        </div>
        <p class="hitchwallet_box_list_hd">近期账单</p>
        <ul class="details_list" v-show="account.length">
          <li v-for="(item,index) in account" :key="index">
            <div v-if="item.consumeType==0">
              <p class="type_name">账户充值</p>
              <p class="time">{{timestampToTime(Number(item.consumeTime))}}</p>
              <p class="amtMoney">+{{desJM(item.amtMoney)}}</p>
            </div>
            <div v-else-if="item.consumeType==1">
              <p class="type_name">
                {{item.orderType}}
                <i>{{getRoute(item.fromTo)}}</i>
              </p>
              <p class="time">{{timestampToTime(Number(item.consumeTime))}}</p>
              <p class="amtMoney">-{{desJM(item.amtMoney)}}</p>
            </div>
            <div v-else-if="item.consumeType==2">
              <p class="type_name">
                退款
                <i>{{getRoute(item.fromTo)}}</i>
              </p>
              <p class="time">{{timestampToTime(Number(item.consumeTime))}}</p>
              <p class="amtMoney">+{{desJM(item.amtMoney)}}</p>
            </div>
            <div v-else-if="item.consumeType==3">
              <p class="type_name">系统赠送</p>
              <p class="time">{{timestampToTime(Number(item.consumeTime))}}</p>
              <p class="amtMoney">+{{desJM(item.amtMoney)}}</p>
            </div>
            <div v-else-if="item.consumeType==4">
              <p class="type_name">
                退款
                <i>{{getRoute(item.fromTo)}}</i>
              </p>
              <p class="time">{{timestampToTime(Number(item.consumeTime))}}</p>
              <p class="amtMoney">-{{desJM(item.amtMoney)}}</p>
            </div>
          </li>
          <p class="allAccount" @click="AllHitchrecord">
            全部记录
            <md-icon name="yhq_next" slot="right" class="yhq_next"></md-icon>
          </p>
        </ul>
        <div class="no-details-list" v-if="!account.length">
          <p class="no_list_img">
            <img src="@/assets/imgs/zhmx_kb.png" />
          </p>
          <p class="no_list_text">还没有流水，还不快去接一单~</p>
        </div>
      </md-scroll-view>
    </div>
  </div>
</template>
<script>
import { Icon, Toast, Dialog, ScrollView, ScrollViewRefresh } from 'mand-mobile';
import Loading from '@/components/loading';
import TopBar from '@/components/TopBar';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import Utils from '@/common/pakjUtils';
import http from '@/common/http';
export default {
  components: {
    [Icon.name]: Icon,
    [Toast.name]: Toast,
    [ScrollView.name]: ScrollView,
    [ScrollViewRefresh.name]: ScrollViewRefresh,
    [TopBar.name]: TopBar
  },
  data() {
    return {
      title: '顺风车费',
      accountBalance: '', //余额
      countAmt: '', // 总行程费用
      account: []
    };
  },
  mounted() {
    // 获取司机钱包信息
    this.getHitchWallt();
    this.getHitchAccountDetail();
  },
  methods: {
    getHitchWallt() {
      Loading.show();
      http.post('/pakj/hitchDriverManageApiController/driverAccountDetail', {}).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          console.log(res.data);
          this.accountBalance = res.data.data.accountBalance;
          if (res.data.data.countAmt) {
            this.countAmt = res.data.data.countAmt;
          } else {
            this.countAmt = '0.00';
          }
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    getHitchAccountDetail() {
      var param = {
        pageNo: 1,
        pageSize: 3
      };
      Loading.show();
      http.post('/pakj/hitchDriverManageApiController/driverAccountTurnover', param).then(res => {
        Loading.hide();
        if (!res) {
          return false;
        }
        if (res.data.code === '000000') {
          console.log(res.data.data);
          this.account = res.data.data;
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    // 全部记录
    AllHitchrecord() {
      this.$router.push({
        name: 'hitchWalletDetail',
        query: {
          tk: this.$route.query.tk
        }
      });
    },
    // 时间戳转化为时间
    timestampToTime(timestamp) {
      var date = new Date(timestamp); // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + '-';
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
      var D = date.getDate() + ' ';
      var h = date.getHours() + ':';
      var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
      var s = date.getSeconds();
      return Y + M + D + h + m + s;
    },
    // des解密
    desJM(value) {
      return decryptByDESModeEBC(value);
    },
    // 字符串截取
    getRoute(text) {
      if (text.length > 15) {
        return text.substring(0, 15) + '...';
      } else {
        return text;
      }
    },
    $_onRefresh() {
      setTimeout(() => {
        this.getHitchWallt();
        this.getHitchAccountDetail();
        this.$refs.scrollView.finishRefresh();
      }, 2000);
    }
  }
};
</script>
<style lang="stylus">
#hitchwallet {
  p, h6 {
    display: block;
    font-size: 22px;
    margin-block-start: 0em;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: 400;
  }

  height: 100vh;
  background-color: color-primary-background;

  .hitchwallet_box {
    margin-top: 20px;
  }

  .hitchwallet_box_top {
    background-color: #fff;
    height: 240px;
  }

  .hitchwallet_box_top h6 {
    font-size: 28px;
    color: #333;
    padding: 30px 30px 0px 30px;
    font-weight: 400;
  }

  .hitchwallet_box_top p {
    font-size: 90px;
    color: #333;
    margin: 20px 30px;
  }

  .hitchwallet_box_top p span {
    font-size: 36px;
    color: #fff;
    background-color: #FF6917;
    width: 180px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    display: inline-block;
    float: right;
    border-radius: 7px;
  }

  .hitchwallet_box_ct {
    margin-top: 20px;
    background-color: #fff;
    height: 120px;
  }

  .hitchwallet_box_ct h6 {
    padding: 20px 30px 0px 30px;
    font-size: 26px;
    color: #999;
    font-weight: 400;
  }

  .hitchwallet_box_ct p {
    font-size: 32px;
    color: #333;
    padding: 5px 30px 0px 30px;
  }

  .hitchwallet_box_list_hd {
    padding: 20px 30px;
    font-size: 26px;
    color: #666;
    background-color: color-primary-background;
  }

  .hitchwallet_box_list {
    background-color: #fff;
  }

  .no-details-list {
    font-size: 28px;
    color: #666;
    background-color: #fff;
    height: 420px;
  }

  .no_list_img {
    padding-top: 100px;
    text-align: center;
  }

  .no_list_img img {
    width: 200px;
    height: 156px;
  }

  .no_list_text {
    margin-top: 10px;
    text-align: center;
    font-size: 28px;
    color: #666;
  }

  .details {
    height: 80px;
    line-height: 80px;
    color: #999;
    padding-left: 30px;
    font-size: 26px;
    background-color: color-primary-background;
  }

  .details_list li {
    height: 110px;
    border-bottom: solid 1px #e0e0e0;
    padding: 0px 30px;
    position: relative;
    background-color: #fff;
  }

  .type_name {
    font-size: 28px;
    color: #333;
    padding-top: 20px;
  }

  .type_name i {
    margin-left: 5px;
  }

  .time {
    font-size: 24px;
    color: #666;
    margin-top: 10px;
  }

  .amtMoney {
    position: absolute;
    top: 45px;
    font-size: 28px;
    color: #333;
    right: 30px;
  }

  .allAccount {
    text-align: center;
    font-size: 26px;
    color: #999;
    margin-top: 20px;
    padding-bottom: 20px;
  }

  .yhq_next {
    position: relative;
    left: 8px;
    top: 1px;
    width: 18px;
    height: 20px;
  }
}
</style>
